<template>
  <view class="news-page">
    <u-navbar placeholder
              leftIcon="arrow-left"
              :title="pageType === 'guide' ? '参赛指南' : '公告通知'"
              @leftClick="goBack" />
    
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
      :height="`${systemInfo.windowHeight - systemInfo.statusBarHeight - 44}px`"
    >
      <view class="news-list">
        <view v-for="item in dataList" 
              :key="item.id" 
              class="news-item"
              @click="onNewsClick(item)">
          <image :src="item.activityImage" 
                 class="news-image" 
                 mode="aspectFill" />
          <view class="news-content">
            <text class="news-title">{{ pageType === 'guide' ? item.themeTitle : item.title }}</text>
            <view class="news-meta">
              <text class="news-date">{{ pageType === 'guide' ? (item.shortTitle || '参赛指南') : formatDate(item.createDate) }}</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

export default {
  name: 'News-List',
  mixins: [MescrollMixin],
  computed: {
    ...mapState({
      systemInfo: (state) => state.app.systemInfo,
    }),
  },
  data() {
    return {
      dataList: [],
      eventId: null,
      pageType: 'notice', // 'notice' | 'guide'
      downOption: {
        auto: true,
      },
      upOption: {
        auto: false,
      },
    }
  },
  onLoad(options) {
    this.eventId = options.eventId || null
    this.pageType = options.type || 'notice'
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onNewsClick(item) {
      if (this.pageType === 'guide') {
        // 参赛指南点击事件，跳转到详情页面
        uni.navigateTo({
          url: `/pages/event/detail/detail?title=${item.themeTitle}`
        })
		uni.setStorageSync('params',item);
      } else {
        // 公告点击事件，跳转到公告详情页面
        uni.navigateTo({
          url: `/pages/notice/detail/detail?id=${item.id}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createDate=${encodeURIComponent(item.createDate || '')}&status=${item.status}`
        })
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return this.$t('pages_album_album_msg_fbec222b')
      const date = new Date(dateStr)
      if (isNaN(date.getTime())) return this.$t('pages_album_album_msg_fbec222b')
      return `${date.getMonth() + 1}月${date.getDate()}日`
    },
    getStatusText(status) {
      const statusMap = {
        0: this.$t('pages_album_album_msg_dca0c13b'),
        1: this.$t('pages_album_album_text_22b4334f'),
        2: this.$t('pages_album_album_msg_0a666759')
      }
      return statusMap[status] || this.$t('pages_album_album_msg_903b25f6')
    },
    getStatusClass(status) {
      const classMap = {
        0: 'status-published',
        1: 'status-draft',
        2: 'status-offline'
      }
      return classMap[status] || 'status-unknown'
    },
    getGuideImage(item) {
      // 如果参赛指南有图片则使用，否则使用默认图片
      if (item.image) {
        return item.image
      }
      // 根据索引使用不同的默认图片
      const index = this.dataList.indexOf(item)
      const imageIndex = (index % 3) + 1
      return `../../static/images/index/guide${imageIndex}.png`
    },
    async upCallback(page) {
      try {
        let resultData = []
        
        if (this.pageType === 'guide') {
          // 获取参赛指南数据
          const result = await this.$api.event.getById(this.eventId)
          resultData = result['evt']['contents'] || []
        } else {
          // 获取公告数据，type=1表示公告
          resultData = await this.$api.event.getByMore({
            id: this.eventId,
            type: 1
          }) || []
        }
        
        console.log(`${this.pageType === 'guide' ? this.$t('pages_event_event_msg_25f78ef1') : '公告'}数据:`, resultData);
        
        if (page.num == 1) {
          this.dataList = resultData
        } else {
          this.dataList = this.dataList.concat(resultData)
        }
		
        // 结束加载
        this.mescroll.endByPage(resultData.length, 1)
      } catch (error) {
        console.error(`获取${this.pageType === 'guide' ? this.$t('pages_event_event_msg_25f78ef1') : '公告'}列表失败:`, error)
        this.mescroll.endErr()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.news-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.news-list {
  padding: 20rpx;
}

.news-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
  display: flex;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.news-image {
  width: 200rpx;
  height: 160rpx;
  flex-shrink: 0;
}

.news-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}

.news-date {
  font-size: 24rpx;
  color: #999;
}

.news-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.status-published {
  background: #e8f5e8;
  color: #52c41a;
}

.status-draft {
  background: #fff7e6;
  color: #fa8c16;
}

.status-offline {
  background: #f5f5f5;
  color: #999;
}

.status-unknown {
  background: #f0f0f0;
  color: #666;
}
</style>